<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <title></title>
  </head>
  <body>
    <img id="scream" src="./1.png" alt="The Scream" width="1000" height="32500" />
    <canvas id="canvasid" width="1000" height="32500"></canvas>
    <script type="text/javascript">
      var ctx = document.getElementById('canvasid').getContext('2d')
      var img = document.getElementById('scream')

      img.onload = function () {
        ctx.drawImage(img, 0, 0, 1000, 32500, 0, 0, 1000, 32500)
      }
      //   500*66000=33000000
      //   500*65000=32500000
      //             30000000
      //             268421360
      //   chrome浏览器限制面积 268421360平方像素
      // 最大宽：65535 则高：4096
      // 最大宽：10000 则高：26843
    </script>
  </body>
</html>
